<template>
	<view>
		
		<view class="u-border-bottom">
			<u-dropdown class="dis_inl_blo va_m" style="width:28%;">
				<u-dropdown-item v-model="value" title="报修类型" :options="options" @change="changeDrop"></u-dropdown-item>
			</u-dropdown>
			<u-search class="dis_inl_blo va_m u-margin-left-15" style="width:65%;" placeholder="请输入需要搜索内容" shape="square" v-model="keyword" @search="searchRepair" @custom="searchRepair"></u-search>
		</view>
		<view style="background-color: #FFFFFF;margin-top: 1px;">
			<u-tabs :list="tabs" bold='true' activeColor="#0B868E" :current="current" @change="changeTabs">
			</u-tabs>
		</view>
		<u-empty style="margin-top:120rpx;" :show="showEmpty" text="暂无数据" mode="list">
		</u-empty>
		<view class="s_list u-padding-20 margin_auto" v-for="(item,index) in orderlist" :key="index" @click="messagedetail(item.id)">
			<view class="list_top u-rela">
				<text style="left:0;" class="u-abso">订单号：{{item.code}}</text>
				<view class="u-abso pos_right" v-if="item.status==0">
					<text style="color:#007AFF;">{{item.status_label}}</text>
				</view>
				<view class="u-abso pos_right" v-if="item.status==1">
					<text style="color:#18B566;">{{item.status_label}}</text>
				</view>
				<view class="u-abso pos_right" v-if="item.status==2">
					<text style="color:#18B566;">{{item.status_label}}</text>
				</view>
				<view class="u-abso pos_right" v-if="item.status==-1">
					<text style="color:#ff5500;">{{item.status_label}}</text>
				</view>
			</view>
			<view class='list_bottom u-rela u-padding-top-20'>
				<image class="img_head va_m" :src="item.images[0]"></image>
				<view class="list_intro dis_inl_blo va_m">
					<view class="list_content">{{item.content}}</view>
					<view>业主：{{item.name}}</view>
					<view>报修类型：{{item.type}}</view>
					<view>
						<u-icon class="u-margin-right-10" name="calendar"></u-icon>
						<text>{{item.time}}</text>
					</view>
					<view class="address_con" v-if="item.house">
						<u-icon class="u-margin-right-10" name="map"></u-icon>
						{{item.house}}</view>
				</view>
				<view v-if="item.status==0" class="list_btn dis_inl_blo u-abso pos_right pos_up_center"  @click.stop="grabbingRepair(item.id)">抢单</view>
				
			</view>
		</view>
		<!-- 弹框提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getRepair,
		getRepairType,
		grabbingRepair,
		searchRepair,
		searchTypeRepair
	} from "@/service/repairService.js";
	export default{
		data () {
			return {
				issnach:0,
				title:'抢单',
				keyword:'',
				
				orderlist:[],
				status:99,
				page:2,
				limit:10,
				current: 0,
				showEmpty:false,
				
				tabs: [{
						name: '全部'
					},{
						name: '待处理'
					},
					{
						name: '处理中'
					},
					{
						name: '已处理'
					},
					{
						name: '已关闭'
					}
				],
				
				value: 1,
				options: [],
				
			}
		},
		onLoad() {
			getRepairType().then(this.getRepairType);
		},
		onShow() {
			
			getRepair({
				status: this.status
			}).then(this.getRepair);
		},
		onReachBottom() {
			getRepair({
				status: this.status,
				limit:this.limit,
				page:this.page
			}).then(res=>{
				// console.log(res);
				if(res.code==200){
					if(res.result.length==0){
						this.$refs.uToast.show({
							type: 'error',
							title: '没有更多啦',
							icon:false
							// message: e.msg,
						})
					}else{
						let list = res.result;
						list.forEach((item) => {
							this.orderlist.push(item);
						})
						this.page++;
					}
					
				}else {
					this.$refs.uToast.show({
						type: 'error',
						title: '没有更多啦',
						icon:false
					})
				}
			});
		},
		methods:{
			messagedetail:function(id){
				uni.navigateTo({
					url:'./orderDetail?id='+id
				})
			},
			getRepairType(e) {
				if (e.code == 200) {
					let list = e.result;
					list.forEach((item) => {
						let obj={
							label:item.name,
							value:item.id
						}
						this.options.push(obj);
					})
				} 
			},
			changeTabs(e) {
				let par;
				// console.log(e);
				this.current = e;
				switch (this.current) {
					case 1:
						par = {
							status: 0
						};
						break;
					case 2:
						par = {
							status: 2
						};
						break;
					case 3:
						par = {
							status: 1
						};
						break;
					case 4:
						par = {
							status: -1
						};
						break;
					default:
						par = {
							status: 99
						};
				}
				getRepair(par).then(this.getRepair);
			},
			changeDrop:function(e){
				searchTypeRepair({
					type: e
				}).then(res=>{
					if(res.code==200){
						this.showEmpty = false;
						this.orderlist=res.result
					}else{
						this.showEmpty = true;
						this.orderlist=[]
					}
				});
			},
			getRepair(e) {
				// console.log(e);
				if (e.code == 200) {
					this.orderlist = e.result;
					if(e.result.length==0){
						this.showEmpty = true;
					}else{
						this.showEmpty = false;
					}
				} else {
					this.showEmpty = true;
					this.orderlist = [];
				}
			},
			searchRepair:function(){
				searchRepair({
					keyword:this.keyword
				}).then(res=>{
					if(res.code==200){
						this.showEmpty = false;
						this.orderlist=res.result
					}else{
						this.showEmpty = true;
						this.orderlist=[]
					}
				})
			},
			grabbingRepair:function(id){
				grabbingRepair({
					id:id
				}).then(res=>{
					if(res.code==200){
						this.$refs.uToast.show({
							title: '抢单成功！',
							type: 'success', 
							icon: false
						})
						getRepair({
							status: this.status
						}).then(this.getRepair);
					}else{
						this.$refs.uToast.show({
							title: '抢单失败，稍后重试！',
							type: 'default', 
							icon: false
						})
					}
				})
			}
		},
		
	}
</script>

<style lang="scss">
	.u-empty.data-v-3d842a77 {
		margin-top:120rpx !important;
	}
	.s_list{
		width:95%;
		border-radius: 20rpx;
		margin-top:20rpx;
		box-shadow: 0 0 10rpx #ccc;
	}
	.list_top{
		height:80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx solid #ccc;
	}
	.list_content,.address_con{
		width:100%;
		height:45rpx;
		display:block;
		white-space: nowrap; 
		overflow: hidden;
		text-overflow:ellipsis;
	}
	.status_con{
		width:100rpx;
		color:#007AFF;
	}
	.img_head{
		width:150rpx;
		height: 200rpx;
		margin-right:20rpx;
		overflow: hidden;
		border:1rpx solid #ddd;
	}
	.list_intro{
		width:73%;
	}
	.list_intro view{
		color:#666;
		padding:5rpx 0;
	}
	.list_btn{
		width:100rpx;
		height:100rpx;
		color:#fff;
		text-align: center;
		line-height: 100rpx;
		font-size: 35rpx;
		border-radius: 50%;
		background-color: #006971;
	}
	.list_btn1{
		background-color: #18B566;
	}
	
</style>
